/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-22 15:03:23
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from 'antd';
import Rate from '@/components/Rate'; 
import './style.less';

export default class Course extends Component {
    constructor(props){
        super(props)
        this.state = {
            list: [{
                url: require('@/static/images/course-1.png'),
                name: 'IOS App逆向工程初探',
                star: 5
            }, {
                url: require('@/static/images/course-2.png'),
                name: '移动端的渗透测试工具入门',
                star: 5
            }, {
                url: require('@/static/images/course-3.png'),
                name: '信息安全等级保护-实战篇',
                star: 4
            }, {
                url: require('@/static/images/course-4.png'),
                name: 'AI安全之机器学习',
                star: 2
            }, {
                url: require('@/static/images/course-5.png'),
                name: '业务开发安全基础',
                star: 3
            }, {
                url: require('@/static/images/course-6.png'),
                name: 'Cobalt Strike高级教程',
                star: 4
            }, {
                url: require('@/static/images/course-7.png'),
                name: 'Web安全基础与常见漏洞',
                star: 2
            }, {
                url: require('@/static/images/course-8.png'),
                name: 'SQL注入基础实战',
                star: 1
            }, {
                url: require('@/static/images/course-9.png'),
                name: '电子取证',
                star: 5
            }, {
                url: require('@/static/images/course-10.png'),
                name: '密码学基础',
                star: 4
            }, {
                url: require('@/static/images/course-11.png'),
                name: '人类硬件漏洞-社会工程学实战入门',
                star: 4
            }, {
                url: require('@/static/images/course-12.png'),
                name: '上网行为管理应用和系统介绍与使用',
                star: 4
            }, {
                url: require('@/static/images/course-13.png'),
                name: '信息安全等级保护-应对篇',
                star: 2
            }, {
                url: require('@/static/images/course-14.png'),
                name: '网络安全法',
                star: 3
            }, {
                url: require('@/static/images/course-15.png'),
                name: 'IoT攻防基础',
                star: 4
            }, {
                url: require('@/static/images/course-16.png'),
                name: 'WIFI的网络基础课程',
                star: 5
            }]
        }
    }

    render() {
        const { list } = this.state;
        return (
            <Layout.Content className="course">
                <div className="nav">
                    <div className="title">安全云课堂</div>
                    <ul>
                        <li className="active">首页</li>
                        <li>渗透测试</li>
                        <li>安全产品</li>
                        <li>等级化保护</li>
                        <li>风险评估</li>
                        <li>安全管理</li>
                        <li>安全意识</li>
                        <li>法律法规</li>
                        <li>其他</li>
                    </ul>
                </div>
                <div className="banner animated fadeIn">
                    <img src={require('@/static/images/banner6.jpg')} alt=""/>
                </div>  
                <div className="kcts">
                    <div className="center">
                        <h1>课程态势</h1>
                        <img src={require('@/static/images/course-1.jpg')} alt=""/>
                    </div>
                </div>
                <div className="course-list">
                    <div className="type">
                        <div className="center">
                            <ul>
                                <li className="active">推荐课程</li>
                                <li>最新课程</li>
                                <li>热点课程</li>
                            </ul>
                        </div>
                    </div>
                    <div className="list">
                        <div className="center">
                            <ul>
                                {
                                    list && list.map((item, index) => {
                                        return(
                                            <li key={index}>
                                                <Link to="/course/detail/1">
                                                    <img src={item.url} alt=""/>
                                                    <div className="info">
                                                        <h1>
                                                            <span title={item.name}>{item.name}</span>
                                                            <Rate value={item.star}/>
                                                        </h1>
                                                        <p>
                                                            <span className="fl">6课时   41分钟</span>
                                                            <span className="fr">62234人听课</span>
                                                        </p>
                                                    </div>
                                                </Link>
                                            </li>  
                                        )
                                    })
                                }
                                
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="user-list">
                    <div className="center">
                        <h1>活跃上传者<Link to="">查看更多 ></Link></h1>
                        <ul>
                            <li>
                                <Link to="/course/user/1">
                                    <img src={require('@/static/images/tea-1.jpg')} alt=""/>
                                    <h1>任小白</h1>
                                    <p>资深研究员</p>
                                    <p>连云港东方农商行</p>
                                </Link>
                            </li>
                            <li>
                                <Link to="/course/user/2">
                                    <img src={require('@/static/images/tea-2.jpg')} alt=""/>
                                    <h1>黄明川</h1>
                                    <p>渗透工程师</p>
                                    <p>连云港众安防火技术有限公司</p>
                                </Link>
                            </li>
                            <li>
                                <Link to="/course/user/3">
                                    <img src={require('@/static/images/tea-3.jpg')} alt=""/>
                                    <h1>陈宇</h1>
                                    <p>技术总监</p>
                                    <p>江苏湛蓝科技开发有限公司</p>
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </Layout.Content>
        );
    }
}